<template>
    <div class="common-layout">
        <el-container>
            <el-aside :style="{height: leftSideHeight, width: leftSideWidth}">
                <LeftMenu ref="toggleMenuRef" :menu-list="menuList" />
            </el-aside>
            <el-container>
                <el-header>
                    <el-row>
                        <el-col :span="12" style="display:flex;vertical-align: middle;height: 50px">
                            <div style="margin-right: 15px;margin-top: 8px;cursor: pointer" @click="toggleLeftSide()">
                                <el-icon color="#4C4C4C" :size="20">
                                    <Fold v-if="!collapsed"/>
                                    <Expand v-if="collapsed"/>
                                </el-icon>
                            </div>
                            <el-breadcrumb :separator-icon="ArrowRight" style="margin-top: 20px;">
                                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                                <el-breadcrumb-item v-for="crumbItem in breadcrumbList" :to="{ path: crumbItem.to }">
                                    {{crumbItem.label}}
                                </el-breadcrumb-item>
                            </el-breadcrumb>
                        </el-col>
                        <el-col :span="10" style="text-align: right;">
                            <!-- 顶部消息Popover -->
                            <el-popover placement="bottom" :width="400" trigger="click" :hide-after="0">
                                <template #reference>
                                    <el-icon :color="iconStyle.color" :size="iconStyle.size" class="d-nav-icon d-cur-hand">
                                        <Message />
                                    </el-icon>
                                </template>
                                <el-table :data="gridData">
                                    <el-table-column property="date" label="date" />
                                    <el-table-column property="name" label="name" />
                                    <el-table-column property="address" label="address" />
                                </el-table>
                            </el-popover>
                            <!-- 全屏 -->
                            <el-tooltip effect="dark" content="全屏">
                                <el-icon :color="iconStyle.color" :size="iconStyle.size" class="d-nav-icon d-cur-hand" @click="isScreenFull">
                                    <FullScreen />
                                </el-icon>
                            </el-tooltip>
                            <!-- 系统设置 -->
                            <el-tooltip effect="dark" content="系统设置">
                                <el-icon :color="iconStyle.color" :size="iconStyle.size" class="d-nav-icon d-cur-hand" @click="showSystemConfigDrawer = !showSystemConfigDrawer">
                                    <IconMenu />
                                </el-icon>
                            </el-tooltip>
                        </el-col>
                        <el-col :span="2" style="text-align: right;">
                            <el-avatar :size="25" :src="circleUrl" style="margin-top:12px;margin-right: 4px;"></el-avatar>
                            <el-dropdown style="margin-top:16px;" class="el-dropdown-link d-cur-hand">
                                <span class="el-dropdown-link">
                                    zhaohongbo
                                </span>
                                <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item :icon="Avatar">个人中心</el-dropdown-item>
                                    <el-dropdown-item :icon="Setting">个人设置</el-dropdown-item>
                                    <el-dropdown-item :icon="Right">退出登录</el-dropdown-item>
                                </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                        </el-col>
                    </el-row>
                </el-header>
                <el-main class="d-main-router-view">
                    <router-view />
                </el-main>
            </el-container>
        </el-container>
    </div>

    <!-- 打开系统配置Drawer -->
    <el-drawer v-model="showSystemConfigDrawer" title="I am the title" :with-header="false">
        <span>系统设置</span>
        <template #footer>
            <div style="flex: auto">
                <el-button>取消</el-button>
                <el-button type="primary">确认</el-button>
            </div>
        </template>
    </el-drawer>
</template>

<script lang="ts" setup>
  import { defineComponent, reactive, toRefs, onMounted, onActivated, ref, provide } from "vue";
  import routes from '../routes/routes';
  import { MenuItem } from '../types/interfaces';
  import LeftMenu from './components/leftMenu.vue';
  import menuData from '../mock/menuData';
  import screenfull from "screenfull";

  import {
    Location,
    Document,
    Menu as IconMenu,
    Setting,
    Fold,
    Expand,
    ArrowLeft,
    ArrowRight,
    FullScreen,
    Bell,
    Avatar,
    Right,
    Message
  } from '@element-plus/icons-vue'

const leftSideHeight = ref('0px');
const leftSideWidth = ref('200px');
const collapsed = ref(false);
const toggleMenuRef = ref();
const breadcrumbList = ref<any>([]);
const menuList = ref(menuData);
const showSystemConfigDrawer = ref(false);

const resize = () => {
    let ch = document.documentElement.clientHeight + 'px';
    leftSideHeight.value = ch;
}

onMounted(() => {
    resize();
    window.onresize = ()=> {
        resize();
    }
})

const toggleLeftSide = () => {
    if (collapsed.value) {
        leftSideWidth.value = '200px';
        collapsed.value = false;
    } else {
        leftSideWidth.value = '70px';
        collapsed.value = true;
    }
    toggleMenuRef.value.toggleMenu();
}

const activiedTab = ref('0');
const editableNavTabs = ref([
  {
    title: '首页',
    name: '0',
    href: '/',
    viewName: 'home'
  }
]);

const refreshNavTabs = (menuItem: MenuItem) => {
    console.log('menuitem.clicked');
    breadcrumbList.value = new Array<any>();
    breadcrumbList.value.push({
        label: menuItem.title,
        to: menuItem.index
    });
}

const closeNavTab = (targetName: string) => {
    const tabs = editableNavTabs.value;
    if (tabs.length == 1) {
        return;
    }
    editableNavTabs.value = tabs.filter((tab) => tab.name != targetName);
    activiedTab.value = editableNavTabs.value[editableNavTabs.value.length - 1].name;
}

const isScreenFull = () => {
    if (!screenfull.isEnabled) {
        console.log('您的浏览器版本过低不支持全屏显示！');
        return false;
    }
    screenfull.toggle();
}

const iconStyle = {
    color: '#4C4C4C',
    size: 20
}

const state = reactive({
  circleUrl:
    'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
  squareUrl:
    'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
  sizeList: ['large', 'default', 'small'],
})

const { circleUrl, squareUrl, sizeList } = toRefs(state)

const gridData = [
  {
    date: '2016-05-02',
    name: 'Jack',
    address: 'New York City',
  },
  {
    date: '2016-05-04',
    name: 'Jack',
    address: 'New York City',
  },
  {
    date: '2016-05-01',
    name: 'Jack',
    address: 'New York City',
  },
  {
    date: '2016-05-03',
    name: 'Jack',
    address: 'New York City',
  },
];

provide('refreshNavTabs', refreshNavTabs);

</script>


<style scoped>
.common-layout .el-header {
  color: var(--el-text-color-primary);
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid var(--el-border-color-base);
}

.common-layout .el-aside {
  /*background-color: #343A40;*/
  background-color: #001529;
  color: var(--el-text-color-primary);
}

.common-layout .el-main {
  color: var(--el-text-color-primary);
  --el-main-padding: 10px;
}

.common-layout > .el-container {
    padding-top: 0px;
}

.common-layout .el-container:nth-child(5) .el-aside,
.common-layout .el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.common-layout .el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.nav-tabs {
    height: 50px;
}

.el-tabs__item {
    height: 25px;
    line-height: 25px;
}

.d-nav-icon {
    margin-top: 15px;margin-right: 20px;
}

.d-main-router-view { 
    background-color: #F0F2F5;
}


.example-showcase .el-dropdown-link {
  color:red  !important;
  display: flex;
  align-items: center;
  font-weight: bold;
}

.d-cur-hand {
    cursor:pointer;
}
</style>